<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>当当网</title>
</head>
<style>

    #dangdang{
        margin-left:50px;
    }
    #three{
        position:absolute;
        top: 5px;
        right:280px;
    }
    ul#list{
        margin-right:30px;
    }
    ul#rightwenzi{
        margin-right:50px;
    }
    ul{
        float: right;
        list-style-type: none;
        margin-right: 30px;
    }
    li.a{
        float: left;
        background:rgb(119, 236, 240);
        padding:8px;
        color: black;
    }
    li.b{
        float: left;
        background:orangered;
        padding-top: 10px;
        padding-bottom: 10px;
        padding-left: 21px;
        padding-right: 21px;
        color:white;
    }
    #head{
        position: relative;
    }
    #tushu{
        width:95%;
        margin-left:40px;
      
    }
    #body{
        border-width: 1px;
        border-color: aquamarine;
        border-style: solid;
        width: 95%;
        margin-left:40px;
    }
</style>

<body>
        <div id="head">
            <img src="img/logo.jpg" id="dangdang">
            <ul id="rightwenzi">
                <li class ="a">尾品汇</li>
                <li class="a">当当优品</li>
                <li class="a">数字馆</li>
                <li class="a">都看阅器</li>
            </ul>
            <img src="img/icon_count.png" id="three">
        </div>
        <div >
            <ul id="list">
                <li class="b">首页</li>
                <li class="b">图书</li>       
                <li class="b">音像</li>                
                <li class="b">童装</li>
                <li class="b">服装</li>       
                <li class="b">鞋靴</li> 
                <li class="b">运动</li>
                <li class="b">箱包</li>       
                <li class="b">美妆</li> 
                <li class="b">珠宝</li>
                <li class="b">家居</li> 
                <li class="b">食品</li>
                <li class="b">酒</li>  
                <li class="b">手机</li>
                <li class="b">数码</li>  
                <li class="b">电脑</li>
                <li class="b">家电</li>       
            </ul>
        </div>
        <div>
            <img src="img/banner.png" id="tushu">
        </div>
        <style>
            #title{
                margin-bottom: 230px;
                position: relative;
            }
            #book01{
                position: relative;
                top: 50px;
                left: -250px;
            }
            #bookNo01{
                position: relative;
                top: -170px;
                left: -705px;
            }
            #bookZi01{
                position: relative;
                top: 20px;
                left: -580px;
            }
            #book02{
                position: relative;
                top: -120px;
                left: 150px;
            }
            #bookNo02{
                position: relative;
                top: -200px;
                left: -95px;
            }
            #bookZi02{
                position: relative;
                top: -240px;
                left: 750px;
            }
            #book03{
                position: relative;
                top:  30px;
                left: 50px;
            }
            #bookNo03{
                position: relative;
                top:  -30px;
                left: -115px;
            }
            #bookZi03{
                position: relative;
                top: -100px;
                left: 500px;
            }

            #body{
                height: 330px;
            }
            #bottom{
                position: relative;
                left: 280px;
            }
        </style>
        <div id="body">
            <img src="img/bg_bang.gif" id="title">
            <img src="img/book-01.jpg" id="book01">
            <img src="img/book-02.jpg" id="book02">
            <img src="img/book-03.jpg" id="book03">
            <img src="img/bookNo1.gif" id="bookNo01">
            <img src="img/bookNo2.gif" id="bookNo02">
            <img src="img/bookNo3.gif" id="bookNo03">
            <img src="img/QQ截图20210329203612.png" id="bookZi01">
            <img src="img/QQ截图20210329203638.png" id="bookZi02">
            <img src="img/QQ截图20210329203646.png" id="bookZi03">
        </div>
        <div>
            <img src="img/QQ截图20210329203659.png" id="bottom">
        </div>
    
</body>
</html>